import {AtIcon} from 'taro-ui'
import React, { useState, useEffect } from 'react';
import Taro from '@tarojs/taro';
import {View} from '@tarojs/components'
import {getHeadTop} from '../../utils/tools'
import './header-bar.scss'

const headTop = getHeadTop()

const HeaderBar: React.FC<{ title: string; color?: string }> = (props) => {
  const [showBack, setShowBack] = useState(true)
  useEffect(() => {
    const pages = Taro.getCurrentPages();
    if (pages.length <= 1) {
      setShowBack(false)
    }
  }, [])
  return (
    <View className='headerBar' style={`top: ${(headTop && (headTop.statusBar + headTop.top)) || 0}px;`}>
      <View className='title' style={`color: ${props.color};`}>{props.title}</View>
      {showBack && <View className='back' onClick={() => Taro.navigateBack()}><AtIcon value='chevron-left' size='20'
        color={props.color}
      /></View>}
      {!showBack &&
      <View className='home' onClick={() => Taro.switchTab({url: '/pages/index/index'})}><AtIcon prefixClass='xxhz'
        value='shouye'
        size='16'
        color='black'
      /></View>}
    </View>
  )
}

HeaderBar.defaultProps = {
  title: '',
  color: 'white'
}

export default HeaderBar
